import Footer from '@/app/components/navigation/footer';
import MobileNav from '@/app/components/navigation/mobile-nav';
import NavBar from '@/app/components/navigation/nav-bar';
import VisitTracker from '@/app/components/VisitTracker';
import "@/lib/config/env-setup";
import { BASE_METADATA } from '@/lib/utils/metadata';
import { VideoService } from '@/lib/video/video-service';
import type { Metadata, Viewport } from "next";
import NextTopLoader from "nextjs-toploader";
import "./globals.css";
import { Noto_Sans_SC } from "next/font/google";

// 使用统一管理的基础元数据
export const metadata: Metadata = BASE_METADATA;

export const viewport: Viewport = {
  width: "device-width",
  initialScale: 1,
  maximumScale: 1,
};

// 配置Noto Sans SC字体（中文）
const notoSansSC = Noto_Sans_SC({
  subsets: ["latin"],
  weight: ["400", "500", "700"],
  display: "swap",
  variable: "--font-noto-sans-sc",
});


export default async function RootLayout({
  children
}: Readonly<{
  children: React.ReactNode;
}>) {

  // 获取所有视频分类用于导航栏
  const types = await VideoService.getAllTypes();

  return (
    <html lang="zh-CN" className="dark">
      <head>

      </head>
      <body className={`${notoSansSC.className} bg-background-darker text-gray-100 font-pingfang`}>
        <NextTopLoader
          color="#ff5f57"
          initialPosition={0.08}
          height={3}
          showSpinner={false}
          shadow="0 0 10px #ff5f57,0 0 5px #ff5f57"
        />
        <div className="flex flex-col min-h-screen">
          <NavBar types={types} />
          <main className={`flex-grow
          bg-gradient-to-b from-background-dark via-[#141a25] to-background-darker 
          backdrop-filter backdrop-blur-sm 
          sm:border-x sm:border-gray-800/20 
          shadow-xl
          ring-1 ring-white/5 ring-inset
          overflow-hidden`}>
            <div className="relative z-10 overflow-x-hidden w-full">
              {children}
            </div>
          </main>
          <Footer />
          <MobileNav types={types} />
        </div>
        <VisitTracker />
      </body>
    </html>
  );
}
